<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container{
				width: 800px;
				height: 800px;
				background-color: #ccf;
				perspective: 800px;
			}
			.card{
				transform-style: preserve-3d;
				background-color: #ffffff44;
				animation: rotate 1s linear infinite;
			}
			@keyframes rotate{
				to{transform: rotateY(1turn) rotateX(1turn);}
			}
		</style>
	</head>
	<body>
		<div class="container">
			
		</div>
		<button onclick="fun()" type="button">测试</button>
		<script type="text/javascript">
			class Game {
				constructor(option = {}) {
				    Object.assign(this,{
						pWidth: 50,
						nX: 0,
						nY: 0
					},option)
					this.init()
				}
				init(){
					// this.initElements()
				}
				initElements(){
					let c = this.container = document.querySelector(this.el)
					this.mW = c.offsetWidth
					this.mH = c.offsetHeight
					this.nX = Math.floor(this.mW / this.pWidth)
					this.nY = Math.floor(this.mH / this.pWidth)
					c.style.position = "relative"
					let inline = []
					for(let i = 0; i < this.nY; i++){
						for(let j = 0; j < this.nX; j++){
							let el = document.createElement('div')
							// 抛出样式控制
							el.className = "card"
							Object.assign(el.style,{
								position: "absolute",
								left: j * this.pWidth + "px",
								top: i * this.pWidth + "px",
								width: this.pWidth + "px",
								height: this.pWidth + "px",
								animationDelay: (i+j) / 10 + "s"
							})
							c.appendChild(el)
							inline.push({
								pos: [j,i],
								element: el
							})
						}
					}
				}
			}
			const gm = new Game({el: ".container"})
			
			function fun () {
				console.log(gm);
			}
			
		</script>
	</body>
</html>